<template>
    <div class="commonity">
        <div class="right_div">
            <div class="butondiv">
                <!-- 创建时间 -->
                <el-date-picker class="common"
                v-model="datevalue"
                type="daterange"
                align="left"
                placeholder="请选择创建时间"
                :picker-options="pickerOptions2">
                </el-date-picker>
                <el-button style="margin-bottom:10px;float: left;margin-top: 1px;" type="primary"
                size="small" icon="search" @click="searchlist()">搜索</el-button>
            </div>
            <div class="tablebackg">
                <el-table :data="classifdata" style="width: 100%;">
                    <el-table-column label=" " min-width="960">
                        <template slot-scope="scope">
                            <div class="linttitlespan">
                                <div class="sixdiv_wid" style="width:18%">
                                     <!-- @click="opere2($event)" -->
                                    <span class="spuname">
                                        <span class="neimout" style="min-width: 100px;overflow: initial;text-overflow: unset;white-space: inherit;">{{scope.row.spu}}</span>
                                        <el-badge v-if="scope.row.tort == '侵权'" :value="scope.row.tort" class="item img_badge"></el-badge>
                                    </span>
                                </div>
                                <div class="sixdiv_wid" style="width:12%">
                                    <span class="titletext">分类：</span>
                                    <span class="neimout" @click="fenleiscope(scope.row)" v-if="scope.row.categoryname != ''" :title="scope.row.categoryname">{{scope.row.categoryname}}</span>
                                    <span class="neimout" @click="fenleiscope(scope.row)" v-else>--</span>
                                </div>
                                <div class="sixdiv_wid"  style="width:10%">
                                    <span class="titletext">图片：</span>
                                    <span class="neimout" @click="showshopimg(scope.row)">{{scope.row.picturecount}}张</span>
                                </div>
                                
                                <div class="sixdiv_wid"  style="width:10%">
                                    <span class="titletext">关键字：</span>
                                    <span class="neimout" v-if="scope.row.keyword !=''" :title="scope.row.keyword">{{scope.row.keyword}}</span>
                                    <span class="neimout" v-else>--</span>
                                </div>
                                <div class="sixdiv_wid"  style="width:12%">
                                    <span class="titletext">美工备注：</span>
                                    <span class="neimout" v-if="scope.row.arter_notes != ''" :title="scope.row.arter_notes">{{scope.row.arter_notes}}</span>
                                    <span class="neimout" v-else>--</span>
                                </div>
                                <div class="sixdiv_wid"  style="width:12%">
                                    <span class="titletext">项目编号：</span>
                                    <span class="neimout" v-if="scope.row.projectId != ''" :title="scope.row.projectId">{{scope.row.projectId}}</span>
                                    <span class="neimout" v-else>--</span>
                                </div>
                                <div class="sixdiv_wid" style="width:18%">
                                    <span class="titletext">负责人：</span>
                                    <span class="neimout" style="width: auto;" v-if="scope.row.principal != ''" :title="scope.row.principal">{{scope.row.principal}}</span>
                                    <span class="titletext" style="margin-left: 3px;">美工：</span>
                                    <span class="neimout" style="width: auto;" v-if="scope.row.spu_arter">{{scope.row.spu_arter}}</span>
                                    <span class="neimout" style="width: auto;" v-else>--</span>
                                </div>
                               
                            </div>
                            <div class="linttitlespan">
                                <div class="sixdiv_wid" style="width:18%; ">
                                    <div class="shopnames" :title="scope.row.name_cn">{{scope.row.name_cn}}</div>
                                </div>
                                <div class="sixdiv_wid" :title="scope.row.canSalePlatform"  style="width:12%">
                                    <span class="titletext">禁售平台：</span>
                                    <span class="neimout" v-if="scope.row.canSalePlatform">{{scope.row.canSalePlatform}}</span>
                                    <span class="neimout" v-else>--</span>
                                </div>
                                <div class="sixdiv_wid"  style="width:10%">
                                    <span class="titletext">描述：</span>
                                    <span class="neimout" v-if="scope.row.description_en != ''" :title="scope.row.description_en" @click="miaoshudia(scope.row)">{{scope.row.description_en}}</span>
                                    <span class="neimout" v-else @click="miaoshudia(scope.row)">--</span>
                                </div>
                                <div class="sixdiv_wid"  style="width:10%">
                                    <span class="titletext">竞品信息：</span>
                                    <span class="neimout" @click="competingclick(scope.row)">{{scope.row.competingcount}}个</span>
                                </div>
                                <div class="sixdiv_wid"  style="width:12%">
                                    <span class="titletext">销售备注：</span>
                                    <span class="neimout" v-if="scope.row.sale_notes != ''" :title="scope.row.sale_notes">{{scope.row.sale_notes}}</span>
                                    <span class="neimout" v-else>--</span>
                                </div>
                                <div class="sixdiv_wid"  style="width:12%">
                                    <span class="titletext">创建信息：</span>
                                    <span class="neimout" :title="scope.row.employname+scope.row.created_on">{{scope.row.employname}} {{scope.row.created_on}}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- loding -->
        <div class="backgdiv" v-if="loading">
			<div style="top: 40%;" v-loading="loading" element-loading-text="拼命加载中"></div>
	    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      classifdata: [],
      loading: false,
      pickerOptions2: {
        //创建时间
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "前天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      datevalue: "" //请选择创建时间model
    };
  },
  methods: {
    findSpuInfo() {
      let params = {};
      let _that = this;
      this.$ajax
        .post("/api/CommodityPool/findSpuInfo", params)
        .then(function(res) {
          if (res.data.code == "200") {
            _that.classifdata = res.data.obj;
          } else {
            _that.classifdata = [];
            _that.$message.warning("暂无数据！");
          }
          _that.loading = false;
        })
        .catch(function(err) {
          _that.classifdata = [];
          _that.$message.warning("系统错误，请稍后重试或联系管理员！");
          _that.loading = false;
        });
    }
  },
  mounted() {
    this.findSpuInfo();
  }
};
</script>

<style scoped lang="scss">
/* 滚动条样式 */
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #e5e9f2 !important;
}
.copytext {
  position: absolute;
  top: 240px;
  left: 100px;
}
/*图片*/
.titlebold {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.imgsbut {
  color: #0aa89e;
  cursor: pointer;
}

.showimgs {
  float: left;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.showimgs .imgslist {
  float: left;
  width: 180px;
  height: 180px;
  margin-right: 15px;
  margin-bottom: 10px;
}

.showimgs .imgslist .samimg {
  width: 100%;
  height: 100%;
}

.showimgs .imgslist img {
  width: 180px;
  height: 180px;
  border: 1px solid #ccc;
  position: absolute;
}
.showimgs .imgslist span {
  float: left;
  width: 100%;
  text-align: center;
  font-weight: bold;
  margin-top: 145px;
  line-height: 30px;
  background: #000;
  color: #fff;
  opacity: 0.3;
}

/*end*/
.backgdiv {
  width: 100%;
  top: 0;
  position: fixed;
  background: rgba(255, 255, 255, 0.6);
  height: 100%;
  z-index: 1;
  .el-loading-spinner {
    width: 100%;
    margin-left: -90px;
  }
}

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #f0f0f0 !important;
}

/* 滚动条样式 */
.commonity .left_div {
  float: left;
  width: 200px;
  height: 100%;
  position: fixed;
  overflow: auto;
  padding-right: 10px;
}

.filter-tree {
  margin-bottom: 150px;
}

.commonity .left_div .el-tree {
  border: none;
}

.commonity .right_div .common {
  width: 250px;
  margin-right: 5px;
  margin-bottom: 10px;
  float: left;
  height: 35px;
  line-height: 35px;
}
.commonity .blank_nont {
  float: right;
}
.margin_but {
  margin-right: 10px;
}
.commonity .right_div .but-seek {
  float: left;
}

.right_div .common-img {
  width: 60px;
  float: left;
  border-radius: 5px;
  height: 60px;
  margin: 5px 5px 0px 0px;
}

.commonity .right_div .shop-name {
  float: left;
  overflow: hidden;
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.commonity .right_div .common-name {
  float: left;
  overflow: hidden;
  width: 200px;
  height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.allspan {
  display: block;
  margin-top: 15px;
  text-align: left;
  line-height: 35px;
  cursor: pointer;
  padding-left: 28px;
  background-color: #fff;
}

.allspan.addclass {
  background: #edf7ff;
}

.allspan:hover {
  background: #e4e8f1;
}

.commonity .right_div .common-name span {
  font-size: 12px;
  background: #ccc;
  padding: 0px 5px;
  float: left;
  color: #fff;
  line-height: 15px;
  border-radius: 3px;
  margin-right: 2px;
}

.operation-p {
  float: left;
  width: 100%;
  height: 23px;
}

.operation-p a {
  color: #20a0ff;
  text-decoration: none;
}

.leadcome {
  text-align: left;
  float: left;
  /* padding-top: 15px; */
  padding-bottom: 15px;
}

.butondiv {
  float: left;
  width: 100%;
}

.color {
  color: #c00201;
}
</style>
<style lang="scss">
.commonity {
  .tablebackg {
    .el-table .positive-row {
      background: #e2f0e4;
    }
  }
  .green {
    color: #0aa89e;
  }

  .green:hover {
    cursor: pointer;
  }
  // .imgWight {
  //   width: 130px !important;
  // }
  .liuyan {
    margin-top: 5px;
    margin-left: 10px;
  }
  .shopmapclas {
    float: left;
    width: 100%;
    margin-bottom: 10px;
  }
  .el-table .cell {
    padding-right: 5px !important;
  }
  .categorycs {
    float: left;
    width: 100%;
    height: 23px;
  }
  .categorycs.hidentli {
    float: left;
    min-width: 90px;
    height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ebayhtml .el-dialog--small {
    width: 840px;
  }
  .dicosupp .el-dialog--small {
    width: 820px;
  }
  .categorycs .namecoder {
    float: right;
    background: #ccc;
    padding: 0 5px;
    line-height: 20px;
    margin-top: 2px;
    color: #fff;
  }
  .categorycs .shopiocs {
    margin-top: 3px;
    float: left;
  }
  .categorycs .clickshops {
    cursor: pointer;
    color: #0aa89e;
  }
  .noetdiv {
    text-align: center;
    font-size: 20px;
  }
  .shoptitle_div {
    float: left;
    width: 100%;
    cursor: pointer;
    .img_badge {
      float: left;
    }
    .shoptit_img {
      width: 50px;
      float: left;
      border-radius: 5px;
      height: 50px;
      margin: 5px 5px 5px 0px;
    }
    .el-badge__content.is-fixed {
      top: 45px;
      right: 25px;
      position: absolute;
      transform: translateY(-50%) translateX(100%);
    }
    .el-badge__content {
      background-color: #0aa89e;
    }
  }
  .linttitlespan {
    float: left;
    height: 25px;
    width: 100%;
    font-size: 12px;
    .sixdiv_wid {
      min-width: 120px;
      float: left;
      .shopnames {
        float: left;
        width: 100%;
        // word-wrap: break-word !important;
        // word-break: break-all !important;
        // overflow: hidden;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 24px;
        /*color: #0AA89E; */
      }
      .spuname {
        float: left;
        min-width: 110px;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .skuclass {
          color: #0aa89e;
          font-weight: bold;
        }
      }
      .titletext {
        float: left;
        // width: 85px;
        text-align: right;
      }
      .neimout {
        float: left;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        color: #0aa89e;
        cursor: pointer;
      }
    }
  }
  .skucsssuen {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fefbd9;
    .tagsanj {
      position: absolute;
      width: 0px;
      height: 0;
      border-top: 35px solid #0aa89e;
      border-left: 35px solid transparent;
      right: 0;
    }
    .texttags {
      position: absolute;
      right: 0;
      font-size: 12px;
      color: #fff;
      transform: rotate(45deg);
    }
    .el-table th {
      height: 15px;
    }
    .el-table th {
      background-color: #eee;
    }
    .el-table__header-wrapper thead div {
      background-color: #eee;
    }
    .el-table th > .cell {
      line-height: 20px;
    }
    .skushop-img {
      width: 50px;
      float: left;
      border-radius: 5px;
      height: 50px;
      margin: 5px 5px 5px 0px;
      cursor: pointer;
    }
    .category_sku {
      float: left;
      width: 100%;
      height: 20px;
    }
    .shopname {
      min-width: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cateskuwid {
      width: 65px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cangweicla {
      width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .skuwidth {
      width: 150px;
      float: left;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      .skuclass {
        color: #0aa89e;
        font-weight: bold;
      }
    }
    .songyinname {
      float: left;
      margin-right: 5px;
      max-width: 90px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .wangwang {
      margin-top: 0px;
      float: left;
    }
    .clickshops {
      cursor: pointer;
      color: #0aa89e;
    }
  }
}
</style>
